<template>
  <div class="tab-title-page device_bill">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" style="width:220px" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchForm.shopName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.orderStatus" placeholder="全部" clearable>
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单日">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center flex-between table-top-btns">
        <div class="flex align-center">
          <h5 class="flex align-center">
            <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
          </h5>
          <el-button v-if="$hasMethod('#export')" size="small" icon="el-icon-upload2" class="export-btn" @click="exportFile">导出</el-button>
        </div>
        <el-popover placement="top" width="570" offset="50" trigger="click">
          <el-table :data="stateData">
            <el-table-column width="150" prop="title" label="表头标题" />
            <el-table-column prop="content" label="对应内容" />
          </el-table>
          <p slot="reference" class="color-666 state_btn pointer"><i class="el-icon-warning-outline" />注释说明</p>
        </el-popover>
      </div>
      <el-table border :data="tableData">
        <el-table-column fixed width="190" align="center" label="订单号">
          <template slot-scope="scope">
            <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{ scope.row.trade_no }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" prop="goods_title" label="商品名称" />
        <el-table-column align="center" prop="month_total" label="总租期" />
        <el-table-column align="center" label="月租金/台">
          <template slot-scope="scope">
            <span>{{ scope.row.month_rent && '￥' + scope.row.month_rent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="租金/台">
          <template slot-scope="scope">
            <span>{{ scope.row.company_rent && '￥' + scope.row.company_rent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="amount" label="分期台数" />
        <el-table-column align="center" label="总租金">
          <template slot-scope="scope">
            <span>{{ scope.row.rent_total && '￥' + scope.row.rent_total }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="160" prop="create_time" label="下单日" />
        <el-table-column align="center" width="100" prop="begin_time" label="起租日" />
        <el-table-column align="center" width="100" prop="end_time" label="到期日" />
        <el-table-column align="center" prop="status" label="订单状态" />
        <el-table-column align="center" prop="periods" label="当月应收期数" />
        <el-table-column align="center" label="当月应收金额">
          <template slot-scope="scope">
            <span>{{ scope.row.rent && '￥' + scope.row.rent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当月实收金额">
          <template slot-scope="scope">
            <span>{{ scope.row.pay_money && '￥' + scope.row.pay_money }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当月逾期金额">
          <template slot-scope="scope">
            <span>{{ scope.row.overdue_money && '￥' + scope.row.overdue_money }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="total_leasenum" label="累计应收期数" />
        <el-table-column align="center" label="累计应收金额">
          <template slot-scope="scope">
            <span>{{ scope.row.total_money && '￥' + scope.row.total_money }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计实收金额">
          <template slot-scope="scope">
            <span>{{ scope.row.total_paymoney && '￥' + scope.row.total_paymoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计逾期金额">
          <template slot-scope="scope">
            <span>{{ scope.row.total_overduemoney && '￥' + scope.row.total_overduemoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="应收账款">
          <template slot-scope="scope">
            <span>{{ scope.row.receivables && '￥' + scope.row.receivables }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="违约金额">
          <template slot-scope="scope">
            <span>{{ scope.row.default_money && '￥' + scope.row.default_money }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" prop="shopname" label="供应商名称" />
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import { getOrderStatus, financeEquipmentList, equipmentListExport } from '@/api/finance'
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      searchForm: {
        orderNo: '',
        goodsName: '',
        shopName: '',
        orderStatus: '',
        orderCreateTime: ''
      },
      tableData: [],
      total: 0,
      selectList: [],
      stateData: [
        { title: '当月应收期数/金额', content: '订单当月租期商户应该收取用户的期数/金额' },
        { title: '当月实收金额', content: '订单当月租期商户实际收取用户的金额' },
        { title: '当月逾期金额', content: '当月逾期金额=当月应收金额-当月实收金额，即订单当月租期还未完结，已到付款期却未付款的金额' },
        { title: '累计应收期数/金额', content: '截止到当月商户应该收取用户的期数/金额' },
        { title: '累计实收金额', content: '截止到当月商户实际收取用户的总金额' },
        { title: '累计逾期金额', content: '累计逾期金额=累计应收金额-累计实收金额，即订单整个租期还未完结，已到付款期却未付款的金额' },
        { title: '应收账款', content: '应收账款=总租金-累计实收金额，即租期未支付的总金额' },
        { title: '违约金额', content: '违约金额是订单整个租期已结束，仍欠款未还的金额' }
      ]
    }
  },
  mounted() {
    this.getSelect()
    this.getList()
  },
  methods: {
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    // 获取数据
    getList() {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      financeEquipmentList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total || 0
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.orderCreateTime = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        orderNo: '',
        goodsName: '',
        orderStatus: '',
        shopName: '',
        orderCreateTime: ''
      }
      this.getList()
    },
    // 导出
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.orderCreateTime = pickerVal
        equipmentListExport(this.searchForm)
      }
    },
    getSelect() {
      getOrderStatus().then(res => {
        const list = []
        for (const key in res) {
          list.push({
            id: key,
            name: res[key]
          })
        }
        this.selectList = list || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 15px 0 15px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}

.child_page {
  padding: 15px;
}

.state_btn {
  position: relative;
  padding: 5px;
  border: 1px solid #e6e6e6;

  i {
    font-size: 14px;
    margin-right: 5px;
  }
}
</style>
